<script setup>
import { nextTick, ref,defineEmits  } from "vue";
import { ElMessage } from "element-plus";

import { VMarkdownView } from 'vue3-markdown'
import 'vue3-markdown/dist/style.css'


// 录音  

// import  voiceservice  from '../voiceservice'


// 聊天框滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    const chat = document.querySelector(".chandler-content_main-board");
    //   console.log(chat.scrollHeight);
    if(chat) {
      chat.scrollTop = chat.scrollHeight;
      window.scroll(0, chat.scrollHeight + 50);
    }
  });

//   清空文本框的内容

reset()
};

// import { VMarkdownView } from 'vue3-markdown'
// import 'vue3-markdown/dist/style.css'


const  emit = defineEmits(['send', 'reset'])

//获取输入框内的内容
const message = ref("")

const  reset = () => {
    message.value = ''
}

const props = defineProps({
    list:{
        type: Array,
        default: ()=>[]
    },
    isUseMarkdown:{
        type: Boolean,
        default: false 
    }
})

const disabled = ref(false)

// 发送聊天消息
const send = () => {
    emit('send',  message.value, scrollToBottom)
};



//  上传图片显示图片 

const fileList = ref([

])
 

const httpRequest = (files) => {
    console.log(files.file)
    // 此处拿到文件上传对象  可以发送数据请求
    let  file  =  files.file
    // 此处发送数据请求 
}


const close = () => {
    fileList.value = []
}


// 上传之间校验
const beforeUpload = (file) =>{
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';  
      const isLt2M = file.size / 1024 / 1024 < 2;  
  
      if (!isJPGorPNG) {  
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');  
      }  
      if (!isLt2M) {  
        this.$message.error('上传图片大小不能超过 2MB!');  
      }  
      return isJPGorPNG && isLt2M;  
}

// 显示音频录入


import { serviceHooks } from "../voiceservice/serviceHooks.js";

const { btnControlclick, statusTextComputed, resultComputed ,isStopComputed} = serviceHooks();
const  isVoiceShow = ref(false)

const showVoice = async  () => {
    isVoiceShow.value =   !isVoiceShow.value  

    btnControlclick()
}




watch(resultComputed,()=>{
  message.value = resultComputed.value
},{
  deep: true 
})

</script>

<template>


    
    <div class="chat-com-content-wrap" data-v-e63fc337="">
        <!-- 话筒 -->
        <div
          v-if="isVoiceShow"
     
        class="isrecording"
       
      >
   
        <div
         
          class="delightIcon"
          style="position: absolute; bottom: 45px; right: calc(50% - 130px)"
        >
          <button
        
            aria-disabled="false"
            type="button"
            class="el-button el-button--primary el-button--default is-circle"
            style="
              width: 100px;
              height: 100px;
              font-size: 45px;
              position: absolute;
              bottom: -15px;
              left: calc(30%);
            "
          >
            <i class="el-icon"
              ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="M512 128a128 128 0 0 0-128 128v256a128 128 0 1 0 256 0V256a128 128 0 0 0-128-128m0-64a192 192 0 0 1 192 192v256a192 192 0 1 1-384 0V256A192 192 0 0 1 512 64m-32 832v-64a288 288 0 0 1-288-288v-32a32 32 0 0 1 64 0v32a224 224 0 0 0 224 224h64a224 224 0 0 0 224-224v-32a32 32 0 1 1 64 0v32a288 288 0 0 1-288 288v64h64a32 32 0 1 1 0 64H416a32 32 0 1 1 0-64z"
                ></path></svg></i
            ><!--v-if--></button
          ><img
           
            class="van-icon__image"
            src="/src/views/admin/utils/chat2/img/download.png"
          />
        </div>
        <div
         
          class="speakTxt"
          style="position: absolute; bottom: 0px; right: calc(50% - 20px);left:0;"
        >
          {{ statusTextComputed }} 
        </div>
      </div>
        <div class="chat-content" data-v-e63fc337="">

         
            <div class="chandler-content_main-board" data-v-e63fc337="">
                <div class="chandler-ext-content_communication-wrap" data-v-e1b6fd87="" data-v-e63fc337="">
                    <div  v-for="(item,index) in list"  :key="index"   class="chandler-ext-content_communication-group" data-v-e1b6fd87="">
                        <div  v-if="!item.left" class="user-wrap" data-v-e1b6fd87="" style="position: relative;">
                            <div class="question" >
                                <el-row :gutter="5" style="margin:0  5px  3px;font-size: 12px;">
                                    {{ item.date }}
                                </el-row>
                                <el-row :gutter="5">
                                    <div class="flex flex-col items-end" data-v-e1b6fd87="">
                                        <div class="user" data-v-e1b6fd87="">
                                            <div class="chandler-ext-content_communication-file-wrap"
                                                data-v-e1b6fd87=""></div>
                                            <div 
                                            v-html="item.message"
                                            class="chandler-ext-content_user-content" data-v-e1b6fd87=""
                                                max-width="60%" 
                                                ></div>
                                        </div>
                                    </div>
                                </el-row>
                            </div>
                            <div class="user_img">
                                <div style="height: 60px;width: 60px;padding-top: 15px;">
                                    <div
                                        style="height: 50px;width: 50px;border: 2px solid #21aa93;border-radius: 50% !important;background-image: url(https://b0.bdstatic.com/337bc39b6880696d8c230d9e09232732.jpg@h_1280);background-position: center;background-size: contain;background-repeat: no-repeat;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- </li> -->

                        <!-- 讯飞星火Ai -->
                        <!-- <li v-else> -->
                        <!-- chat输出 -->
                        <div  v-else class="chandler-ext-content_communication-wrap-ai-wrap finish" data-v-e1b6fd87=""
                            style="position: relative;">
                            <!-- 白色气泡的区域 -->
                            <div class="user_img">
                                <div style="height: 60px;width: 60px;position: relative;">
                                    <div
                                        style="margin-top: 0px;height: 50px;width: 50px;border-radius: 50% !important;background-image: url(https://xinghuo.xfyun.cn/static/media/gpt-logo.e9ad4150a385435f5a90b50c44dad847.svg);background-position: center;background-size: contain;background-repeat: no-repeat;position: absolute;top: -20px;">
                                    </div>
                                </div>
                            </div>
                            <div class="question">
                                <el-row :gutter="5" style="margin:0 0px;font-size: 12px;">
                                    {{ item.date }}
                                </el-row>
                                <el-row :gutter="5">
                                    <div class="chandler-ext-content_communication-wrap-ai" data-v-e1b6fd87="">
                                        <div class="speaker" data-v-e1b6fd87="">
                                            讯飞星火Ai
                                            <div class="chandler-ext-content_communication-wrap-ai-ctrl"
                                                data-v-e1b6fd87="">
                                                <span class="chandler-ext-content_communication-wrap-ai-ctrl-copy"
                                                    title="copy content" data-v-e1b6fd87="">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="chandler-ext-content_communication-p" data-v-e1b6fd87="">
                                            <div class="chandler-ext-content_communication-p-inner chandler-ext-content_communication-p-inner-1721123918102 finish"
                                                data-v-e1b6fd87="">
                                                <div class="chandler-aireply-wrap"
                                                    data-message-id="c5b99dbb-c959-4050-bf16-4958fbcff704"
                                                    data-conversation-id="78f4b00f-fbe3-476f-87b4-3d1f6b307b9b"
                                                    data-conversation-message-id="c5b99dbb-c959-4050-bf16-4958fbcff704">
                                                    <p class="con_box"  v-html="item.message"></p>
                                                    <!-- <VMarkdownView mode="light" :content="item.message"></VMarkdownView> -->
                                                    <!-- <VMarkdownView :mode="mode" :content="item.message"></VMarkdownView> -->
                                                    <!-- <p v-if="item.tips" @click="stopAnswer" class="answers">
                                  停止回答
                                </p> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-row>
                            </div>
                        </div>
                        <!-- </li> -->
                        <!-- </template> -->
                        <!-- </ul> -->


                    </div>
                </div>
            </div>

        
            <!-- 新添加——清空页面上的记录 -->
            <div class="new-chat-wrap new-chat-wrap-tips" data-v-32c93452="" data-v-e63fc337="">
               
                <!-- 预览图片 -->
               <div v-if="fileList[0]" class="preview">
                <el-icon  @click="close"  class="icon-del"><Close /></el-icon>
                <img   :src="fileList[0].url" alt="" >
               </div>
               <div class="flex" data-v-32c93452="">
         

               <el-button  @click="showVoice" text class="new-chat" data-v-32c93452="" style="padding: 15px;">
            
                 <!-- 语音 -->
                 <svg class="voice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 128a128 128 0 0 0-128 128v256a128 128 0 1 0 256 0V256a128 128 0 0 0-128-128m0-64a192 192 0 0 1 192 192v256a192 192 0 1 1-384 0V256A192 192 0 0 1 512 64m-32 832v-64a288 288 0 0 1-288-288v-32a32 32 0 0 1 64 0v32a224 224 0 0 0 224 224h64a224 224 0 0 0 224-224v-32a32 32 0 1 1 64 0v32a288 288 0 0 1-288 288v64h64a32 32 0 1 1 0 64H416a32 32 0 1 1 0-64z"></path></svg>
              
                语音输入
            </el-button>
</div>

                <div class="flex" data-v-32c93452="">
                   
                    <el-upload
                    class="upload-demo"
                    action="#"
                    v-model:file-list="fileList"
                    :before-upload="beforeUpload"
                    :http-request="httpRequest"
                    :show-file-list="false"
                    :limit="1"
                    list-type="picture-card"
                    :file-list="fileList">




                    <el-button    icon="Plus" text class="new-chat" data-v-32c93452="" style="padding: 15px;">上传图片</el-button>
  
                  
                  </el-upload>
                   
                   
                                </div>
                <div class="flex" data-v-32c93452="">
                    <el-button icon="Plus" text class="new-chat" data-v-32c93452="" style="padding: 15px;">New
                        Chat</el-button>
                </div>
            </div>
            <!-- 输入框的总体 -->
            <div class="chandler-content_main-bottom" data-v-e63fc337="">
                <div class="chandler-content_input-box" data-v-41ebc2a6="" data-v-e63fc337="">
                    <div class="chandler-content_input-box-content" data-v-41ebc2a6="">
                        <div class="top" data-v-41ebc2a6="">
                            <textarea class="chandler-content_input-area" placeholder="问我任何问题shift+enter实现换行输入"
                                data-v-41ebc2a6="" v-model="message" col="120" rows="1" @keyup.enter="send"></textarea>
                        </div>
                        <div class="bottom" data-v-41ebc2a6="">
                            <!-- 左边的上传文件和图片 -->
                           <div class="left" data-v-41ebc2a6="">
                <div class="paperclip chandler-content_input-box-icon" title="The file size is less than 20m"
                  data-v-41ebc2a6="">
                  <div class="upload-demo" data-v-41ebc2a6="" style="opacity: 0; width: 0px; height: 0px;">
                    <div class="el-upload el-upload--text" tabindex="0">
                      <div class="paperclip chandler-content_input-box-icon" title="The file size is less than 20m"
                        data-v-41ebc2a6="">
                      </div>
                      <input class="el-upload__input" name="file" accept="" type="file">
                    </div>
                    <ul class="el-upload-list el-upload-list--text is-disabled"></ul>
                  </div>
                </div>
                <div class="crop chandler-content_input-box-icon" data-v-41ebc2a6="">
                  <div class="upload-demo" data-v-41ebc2a6="" style="opacity: 0; width: 0px; height: 0px;">
                    <div class="el-upload el-upload--text" tabindex="0">
                      <div class="paperclip chandler-content_input-box-icon" title="The file size is less than 20m"
                        data-v-41ebc2a6="">
                      </div>
                      <input class="el-upload__input" name="file" accept="" type="file">
                    </div>
                    <ul class="el-upload-list el-upload-list--text is-disabled"></ul>
                  </div>
                </div>
              </div> 
                            <!-- 右边发送 -->
                            <div class="right" data-v-41ebc2a6="" style="position: absolute;right: 20px;bottom: 15px;">
                                <!-- <span class="send unable" data-v-41ebc2a6="" style="font-size: 30px;">
                  <el-icon style="height: 50px;width: 48px;">
                    <Promotion />
                  </el-icon>
                </span> -->
                                <el-button icon="Promotion" type="info" circle :disabled="disabled" @click="send"
                                    style="height: 50px;width: 50px;font-size: 25px;">
                                    <!-- {{ disabled ? "回答中..." : "发送" }} -->
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    
</template>

<style scoped>
.chat-com-content-wrap[data-v-e63fc337] {
    position: relative;
    width: 100%;
    height: calc(100% - 46px);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 16px auto 0;
    border-radius: 36px;
    background: rgba(255, 255, 255, .32);
    overflow: hidden;
}

.chat-com-content-wrap .chat-content[data-v-e63fc337] {
    width: 100%;
    height: calc(100% - 56px);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    user-select: text;
}

.chat-com-content-wrap .chandler-content_main-board[data-v-e63fc337] {
    width: 100%;
    overflow-y: auto;
    flex: 1 1 0%;
    overscroll-behavior: contain;
    margin: 30px 0 0;
}

.chandler-ext-content_communication-wrap[data-v-e1b6fd87] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px 28px;
}
.question {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group[data-v-e1b6fd87] {
    width: 100%;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap .user[data-v-e1b6fd87] {
    padding: 12px 18px 12px 12px;
    border-radius: 22px 22px 0;
    /* 用户气泡 */
    background: #ffc800;
    font-size: 16px;
    margin-right: 8px;
    min-width: 120px;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .user-wrap .chandler-ext-content_user-content[data-v-e1b6fd87] {
    white-space: pre-wrap;
    word-break: break-word;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap[data-v-e1b6fd87] {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai[data-v-e1b6fd87] {
    max-width: 100%;
    padding: 10px 12px 12px;
    border-radius: 0 22px 22px;
    background: #fff;
    font-size: 16px;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker[data-v-e1b6fd87] {
    text-align: left;
    margin-bottom: 4px;
    font-size: 12px;
    /* ai文字 */
    color: #ffba43;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker .chandler-ext-content_communication-wrap-ai-ctrl[data-v-e1b6fd87] {
    display: inline-flex;
    align-items: center;
    flex: 0;
    flex-shrink: 0;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-wrap-ai-wrap .chandler-ext-content_communication-wrap-ai .speaker .chandler-ext-content_communication-wrap-ai-ctrl-copy[data-v-e1b6fd87] {
    margin-left: 8px;
    width: 24px;
    height: 24px;
    display: block;
    background: url(./copy.a609a2c2.svg) no-repeat center;
    background-size: 16px;
    transition: .2s all linear;
    cursor: pointer;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-p[data-v-e1b6fd87] {
    text-align: left;
}

.chandler-ext-content_communication-wrap .chandler-ext-content_communication-group .chandler-ext-content_communication-p .chandler-ext-content_communication-p-inner[data-v-e1b6fd87] {
    overflow-wrap: break-word;
    word-break: normal;
    transform: translateZ(0);
    white-space: pre-wrap;
    will-change: transform;
    color: #000;
}

.markdwon-container *,
.chandler-aireply-wrap *,
.chandler-ext-content_communication-p-inner * {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.markdwon-container p,
.chandler-aireply-wrap p,
.chandler-ext-content_communication-p-inner p {
    display: inline;
    line-height: 1.5;
}


.chat-com-content-wrap .new-chat-wrap[data-v-e63fc337] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 16px;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
}

.new-chat-wrap .new-chat[data-v-32c93452] {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    gap: 8px;
    cursor: pointer;
    transition: all .3s linear;
}

img,
svg,
iframe,
canvas,
video {
    display: block;
    vertical-align: middle;
}

.chandler-content_input-box[data-v-41ebc2a6] {
    position: relative;
    width: 100%;
    z-index: 1;
    padding: 0 12px 12px;
}

.chandler-content_input-box .chandler-content_input-box-content[data-v-41ebc2a6] {
    width: 100%;
    background: rgba(255, 255, 255, .72);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* 底边 */
    box-shadow: 0 3px #ffc800;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

/* 输入框 */
.chandler-content_input-box .chandler-content_input-box-content .top[data-v-41ebc2a6] {
    flex: 1;
    width: 100%;
    padding: 0 14px;
}

.chandler-content_input-box .chandler-content_input-box-content .chandler-content_input-area[data-v-41ebc2a6] {
    resize: none;
    width: 100%;
    padding: 12px 0;
    height: 11vh;
    max-height: 100px;
    min-height: 60px;
    border: unset;
    color: #413659;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    outline: none;
    box-sizing: border-box;
    background: transparent;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom[data-v-41ebc2a6] {
    padding: 8px 12px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left[data-v-41ebc2a6] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left .paperclip[data-v-41ebc2a6] {
    background: url(./paperclip.2a2553e6.svg) no-repeat center;
}

.el-upload {
    --el-upload-dragger-padding-horizontal: 40px;
    --el-upload-dragger-padding-vertical: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: 0;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .left .paperclip[data-v-41ebc2a6] {
    background: url(./paperclip.2a2553e6.svg) no-repeat center;
}

a,
area,
button,
[role=button],
input:not([type="range"]),
label,
select,
summary,
textarea {
    touch-action: manipulation;
}

.el-upload-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right[data-v-41ebc2a6] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right .chandler-peculiarity[data-v-41ebc2a6] {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.chandler-content_input-box .chandler-content_input-box-content .bottom .right .send.unable[data-v-41ebc2a6] {
    height: 50px;
    width: 50px;
    /* color: red; */
    background-color: #c0c5cc;
    border-radius: 50%;
}

.new-chat-wrap-tips{
    position: relative;
}
.new-chat-wrap-tips > div {
    margin-left: 10px;
}

.preview {
    width: 120px;
    height: 120px;
    border-radius: 5px;
    position: absolute;
    left: 28px;
    top: -80px;

}

.preview  img {
    width: 100%;
    height: 100%;
}

.icon-del {
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;
}

.voice {
    color: #606266;
    font-size: 14px;
    width: 18px;
    transform: translateY(-1px);
}

.isrecording {
    position: absolute;
    bottom: 156px;
    width: 280px;
    height: 100px;
    text-align: center;

}

.speakTxt {
    width: 100%;
}

</style>

<style  lang="scss">

.con_box  {
    img {
        max-width: 100%;
    }

 
}

.new-chat-wrap-tips {
    .el-upload--picture-card {
        border: none;
        width: auto;
        height: auto;
        background-color: transparent;
    }
}



</style>
